<template>
  <div :style="{height:'100%' }">
    <div style="width: 100%;height:100%;">
      <div id="machine1" class="slotMachine" style="height:100%" :style="{width:defaultConfig.layoutConfig.perWidth+'px'}">
        <div style="background-size: 100% 100%;height:100%;width:100%;" :style="{height:'100%',backgroundImage:'url('+bgImage+')',backgroundSize: bgSize  }"></div>
      </div>
      <div id="machine2" class="slotMachine" style="height:100%;margin-left:5px;" :style="{width:defaultConfig.layoutConfig.perWidth+'px'}">
        <div style="background-size: 100% 100%;height:100%;width:100%;" :style="{height:'100%',backgroundImage:'url('+bgImage+')',backgroundSize: bgSize  }"></div>
      </div>
      <div id="machine3" class="slotMachine" style="height:100%;margin-left:5px;" :style="{width:defaultConfig.layoutConfig.perWidth+'px'}">
        <div style="background-size: 100% 100%;height:100%;width:100%;" :style="{height:'100%',backgroundImage:'url('+bgImage+')',backgroundSize: bgSize  }"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import $ from "jquery";
export default {
  name: "game_tiger_lucky_area",
  cname: "老虎机区",
  configName: "c_tiger_lucky_area",
  icon: "iconfuzhukongbai",
  type: 3, // 0 基础组件 1 活动组件

  dataShow: 0, // 1展示，0隐藏
  dataSort: 10, // 排序，小的在前
  dataDelete: 0, // 0不可删除，1可删除
  dataLimit: 1, // 0无限制，
  dataLimitRange: 0,  // 限制范围:0多个页面，1 1个页面
  dataTag: [1, 2],  // 组件标签-筛选

  dataExtendOne: 0, // 两个扩展，暂时无用
  dataExtendTwo: 0,

  defaultName: "gameTigerLuckyArea", // 外面匹配名称
  props: {
    index: {
      type: null,
      default: -1,
    },
    num: {
      type: null,
    },
  },
  position: {
    top: 0,
    left: 72.5,
    width: 230,
    height: 75,
    zindex: 1,
  },
  computed: {
    ...mapState("admin/mobildConfig", ["defaultArray"]),
  },
  watch: {
    pageData: {
      handler (nVal, oVal) {
        this.setConfig(nVal);
      },
      deep: true,
    },
    num: {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[nVal];
        this.setConfig(data);
        // this.$store.state.admin.mobildConfig.defaultArray.forEach((el, i) => {
        //     if (el.timestamp == nVal) {
        //         this.setConfig(el)
        //         console.log(i, 'index监听')
        //     }
        // })
      },
      deep: true,
    },
    defaultArray: {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[this.num];
        this.setConfig(data);
      },
      deep: true,
    },
  },
  data () {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: "gameTigerLuckyArea",
        timestamp: this.num,
        position: {
          top: 0,
          left: 72.5,
          width: 230,
          height: 75,
          zindex: 1,
        },
        layoutConfig: {
          widthTitle: "宽度",
          width: 230,
          heightTitle: "高度",
          height: 75,
          topTitle: "居上",
          top: 0,
          leftTitle: "居左",
          left: 72.5,
          perWidth: 210 / 3,//2，3小图案距离左侧5px 小程序端距离左侧10rpx
        },
        logoConfig: {
          title: "背景图片",
          url:
            "https://img.alicdn.com/imgextra/i1/289589474/TB2vl08c90jpuFjy0FlXXc0bpXa-289589474.png",
        },
        roundType: {
          title: "转盘类型",
          type: 0,
          list: [
            {
              val: "无指针",
              style: "0",
            },
            {
              val: "带指针",
              style: "1",
            },
            {
              val: "带指针2",
              style: "2",
            },
          ],
        },
      },
      bgImage: "",
      noRepeat: "no-repeat",
      bgSize: "",
      confObj: {},
      pageData: {},
      edge: "",
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.pageData = this.$store.state.admin.mobildConfig.defaultArray[
        this.num
      ];
      this.setConfig(this.pageData);
    });
  },
  methods: {
    setConfig (data) {
      this.bgImage = data.logoConfig.url;
      this.bgSize = "100% 100%";
    },
  },
};
</script>

<style scoped lang="stylus">
.box {
  height: 100px;
  background: #F5F5F5;
}

.slotMachine {
  overflow: hidden;
  display: inline-block;
  text-align: center;
  background-color: #ffffff;
}
</style>
